<template>
  <el-table
    class="multiple-table"
    ref="multipleTableRef"
    :data="tableData"
    row-key="id"
    @selection-change="handleSelectionChange"
  >
    <el-table-column type="selection" width="55" />
    <!-- <el-table-column label="Date" width="120">
      <template #default="scope">{{ scope.row.date }}</template>
    </el-table-column> -->
    <el-table-column property="name" label="收款单位" />
    <el-table-column property="account" label="账号" />
    <el-table-column property="address" label="开户行" />
  </el-table>
  <div style="margin-top: 20px">
    <el-button :disabled="!multipleSelection.length" @click="goToPage">下一步</el-button>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import type { CompanyList } from '../../types'
import type { TableInstance } from 'element-plus'
import { useCompanyStore } from '../../store'
import { useRouter } from 'vue-router'

const router  = useRouter()
const goToPage = ()=>{
  useCompany.setCompany(multipleSelection.value)
  router.push('/group')
}


const multipleTableRef = ref<TableInstance>()
const multipleSelection = ref<CompanyList[]>([])

const useCompany = useCompanyStore()
const handleSelectionChange = (val: CompanyList[]) => {
  multipleSelection.value = val
  // useCompany.setCompany(val)
  // console.log(val)
}
/*
INSERT INTO company_accounts (name, account, bank_name, is_active) VALUES
('深圳市怡美盛光电有限公司', '4000 0325 0920 1378 519', '中国工商银行深圳新沙支行', TRUE),
('深圳市桂达电子科技有限公司', '7653 7289 8810', '中国银行深圳科苑路支行', TRUE),
('东莞市恒晟光学有限公司', '4405 0177 9108 0000 1202', '中国建设银行东莞长安支行', TRUE),
('深圳市永裕泰电子有限公司', '6228 4801 2878 3587 875(王义华)', '农业银行深圳市华强支行', TRUE),
('深圳市永裕泰电子有限公司', '7559 1495 5610 803', '招商银行深圳深纺大厦支行', TRUE),
('广州华维模具制品有限公司', '8002 7021 7408 013', '广州银行东莞庄支行', TRUE),
('深圳市吉佳美科技有限公司', '4000 1039 0910 0132 027', '中国工商银行深圳大浪支行', TRUE),
('深圳市都乐精密制造有限公司', '1100 5932 2065 01', '平安银行深圳龙岗支行', TRUE),
('深圳市信智德科技有限公司', '4000 0280 0920 0300 328', '中国工商银行深圳福园支行', TRUE),
('东莞市源点光学有限公司', '0801 9019 0010 0156 60', '东莞农村商业银行长安支行', TRUE),
('深圳市志创科技有限公司', '6212 2520 0500 1577 989（梁月婵）', '中国工商银行仁化支行', TRUE),
('深圳市鑫宇优创科技有限公司', '6222 6013 1002 4596 207（欧江河）', '交通银行', TRUE),
('宁波金晟芯影像技术股份有限公司', '3080 0627 8013 0000 8212 6', '交通银行宁波奉化支行', TRUE),
('浙江深海电子有限公司', '1927 1901 0400 6566 7', '中国农业银行乐清市支行虹桥支行', TRUE),
('世大光电（深圳）有限公司', '7432 5794 3279', '中国银行深圳市分行', TRUE),
('佛山市百亿光电有限公司', '6561 7135 0563', '中国银行佛山汾江支行', TRUE),
('苏州市悠越电子有限公司', '1054 7601 0400 4137 3', '中国农业银行苏州高新技术产业开发区支行', TRUE),
('深圳市艾普盛科技有限公司', '0002 1647 5935', '深圳农商银行', TRUE),
('陕西禾瑞光科技有限公司', '2707 0194 0120 1000 0030 75', '陕西省安康农村商业银行天贸城支行', TRUE),
('深圳市贝斯腾电子有限公司', '7523 5795 0707', '中国银行深圳福永支行', TRUE),
('深圳市奥世强电子科技有限公司', '4000  0234  0920  0752  018', '中国工商银行深圳西乡支行', TRUE),
('深圳市韦弗半导体有限公司', '4000 0925 0910 0644 710', '中国工商银行深圳宝安中心区支行', TRUE),
('深圳市杰昕科技有限公司', '9440 3701 0000 9289 19', '中国邮政储蓄银行深圳宝安区新沙支行', TRUE),
('东莞市坤宇实业发展有限公司', '2010 3314 0910 0011 795', '中国工商银行东莞长安支行', TRUE),
('深圳市加亿吸塑包装有限公司', '4102 0100 0400 4083 8', '农业银行深圳福永支行', TRUE),
('深圳市亚奇科技有限公司', '3370 8010 0100 0316 40', '兴业银行深圳中心区支行', TRUE),
('深圳盛和翔电子有限公司', '6225 8878 0379 0993（周冬玲）', '招商银行深圳分行车公庙支行', TRUE),
('深圳市芯成科技有限公司', '6222 6213 1002 9281 546（廖伟）', '交通银行', TRUE),
('深圳市宏通达电子有限公司', '6214 6772 0000 3631 792（王宏刚）', '中国建设银行深圳分行振华支行', TRUE),
('深圳市恒心科技有限公司', '6222 6213 1003 4284 279（蒙志权）', '交通银行深圳松岗支行', TRUE),
('东莞市百视通达光电有限公司', '1101 6479 3010 00', '平安银行东莞长安支行', TRUE),
('深圳市新天源电子有限公司', '1100 7070 0815 01', '平安银行深圳华富支行', TRUE),
('江西省禾诚达科技实业有限公司', '1400 3101 0400 2579 6', '中国农业银行全南支行', TRUE),
('前海辉派科技（深圳）有限公司', '6226 1906 0015 6032（袁志辉）', '中国民生银行深圳深南支行', TRUE),
('东莞市顺祥包装制品有限公司', '1501 5019 0010 0211 20
*/
const tableData: CompanyList[] = [
  {
    id: 1,
    name: '深圳市怡美盛光电有限公司',
    account: '4000 0325 0920 1378 519',
    address: '中国工商银行深圳新沙支行',
  },{
    id: 2,
    name: '深圳市桂达电子科技有限公司',
    account: '7653 7289 8810',
    address: '中国银行深圳科苑路支行',
  },{
    id: 3,
    name: '东莞市恒晟光学有限公司',
    account: '4405 0177 9108 0000 1202',
    address: '中国建设银行东莞长安支行',
  },{
    id: 4,
    name: '深圳市永裕泰电子有限公司',
    account: '6228 4801 2878 3587 875(王义华)',
    address: '农业银行深圳市华强支行',
  },{
    id: 5,
    name: '深圳市永裕泰电子有限公司',
    account: '7559 1495 5610 803',
    address: '招商银行深圳深纺大厦支行',
  },{
    id: 6,
    name: '广州华维模具制品有限公司',
    account: '8002 7021 7408 013',
    address: '广州银行东莞庄支行',
  },{
    id: 7,
    name: '深圳市吉佳美科技有限公司',
    account: '4000 1039 0910 0132 027',
    address: '中国工商银行深圳大浪支行',
  },{
    id: 8,
    name: '深圳市都乐精密制造有限公司',
    account: '1100 5932 2065 01',
    address: '平安银行深圳龙岗支行',
  },{
    id: 9,
    name: '深圳市信智德科技有限公司',
    account: '4000 0280 0920 0300 328',
    address: '中国工商银行深圳福园支行',
  },{
    id: 10,
    name: '东莞市源点光学有限公司',
    account: '0801 9019 0010 0156 60',
    address: '东莞农村商业银行长安支行',
  },{
    id: 11,
    name: '深圳市志创科技有限公司',
    account: '6212 2520 0500 1577 989（梁月婵）',
    address: '中国工商银行仁化支行',
  },{
    id: 12,
    name: '深圳市鑫宇优创科技有限公司',
    account: '6222 6013 1002 4596 207（欧江河）',
    address: '交通银行',
  },{
    id: 13,
    name: '宁波金晟芯影像技术股份有限公司',
    account: '3080 0627 8013 0000 8212 6',
    address: '交通银行宁波奉化支行',
  },{
    id: 14,
    name: '浙江深海电子有限公司',
    account: '1927 1901 0400 6566 7',
    address: '中国农业银行乐清市支行虹桥支行',
  },{
    id: 15,
    name: '世大光电（深圳）有限公司',
    account: '7432 5794 3279',
    address: '中国银行深圳市分行',
  },{
    id: 16,
    name: '佛山市百亿光电有限公司',
    account: '6561 7135 0563',
    address: '中国银行佛山汾江支行',
  },{
    id: 17,
    name: '苏州市悠越电子有限公司',
    account: '1054 7601 0400 4137 3',
    address: '中国农业银行苏州高新技术产业开发区支行',
  },{
    id: 18,
    name: '深圳市艾普盛科技有限公司',
    account: '0002 1647 5935',
    address: '深圳农商银行',
  },{
    id: 19,
    name: '陕西禾瑞光科技有限公司',
    account: '2707 0194 0120 1000 0030 75',
    address: '陕西省安康农村商业银行天贸城支行',
  },{
    id: 20,
    name: '深圳市贝斯腾电子有限公司',
    account: '7523 5795 0707',
    address: '中国银行深圳福永支行',
  },{
    id: 21,
    name: '深圳市奥世强电子科技有限公司',
    account: '4000  0234  0920  0752  018',
    address: '中国工商银行深圳西乡支行',
  },{
    id: 22,
    name: '深圳市韦弗半导体有限公司',
    account: '4000 0925 0910 0644 710',
    address: '中国工商银行深圳宝安中心区支行',
  },{
    id: 23,
    name: '深圳市杰昕科技有限公司',
    account: '9440 3701 0000 9289 19',
    address: '中国邮政储蓄银行深圳宝安区新沙支行',
  },{
    id: 24,
    name: '东莞市坤宇实业发展有限公司',
    account: '2010 3314 0910 0011 795',
    address: '中国工商银行东莞长安支行',
  },{
    id: 25,
    name: '深圳市加亿吸塑包装有限公司',
    account: '4102 0100 0400 4083 8',
    address: '农业银行深圳福永支行',
  },{
    id: 26,
    name: '深圳市亚奇科技有限公司',
    account: '3370 8010 0100 0316 40',
    address: '兴业银行深圳中心区支行',
  },{
    id: 27,
    name: '深圳盛和翔电子有限公司',
    account: '6225 8878 0379 0993（周冬玲）',
    address: '招商银行深圳分行车公庙支行',
  },{
    id: 28,
    name: '深圳市芯成科技有限公司',
    account: '6222 6213 1002 9281 546（廖伟）',
    address: '交通银行',
  },{
    id: 29,
    name: '深圳市宏通达电子有限公司',
    account: '6214 6772 0000 3631 792（王宏刚）',
    address: '中国建设银行深圳分行振华支行',
  },{
    id: 30,
    name: '深圳市恒心科技有限公司',
    account: '6222 6213 1003 4284 279（蒙志权）',
    address: '交通银行深圳松岗支行',
  },{
    id: 31,
    name: '东莞市百视通达光电有限公司',
    account: '1101 6479 3010 00',
    address: '平安银行东莞长安支行',
  },{
    id: 32,
    name: '深圳市新天源电子有限公司',
    account: '1100 7070 0815 01',
    address: '平安银行深圳华富支行',
  },{
    id: 33,
    name: '江西省禾诚达科技实业有限公司',
    account: '1400 3101 0400 2579 6',
    address: '中国农业银行全南支行',
  },{
    id: 34,
    name: '前海辉派科技（深圳）有限公司',
    account: '6226 1906 0015 6032（袁志辉）',
    address: '中国民生银行深圳深南支行',
  },{
    id: 35,
    name: '东莞市顺祥包装制品有限公司',
    account: '1501 5019 0010 0211 20',
    address: '东莞市农村商业银行大朗西牛陂支行',
  },{
    id: 36,
    name: '深圳市金视达光电有限公司',
    account: '0000 3361 6310',
    address: '深圳农村商业银行松岗支行',
  },{
    id: 37,
    name: '深圳市韦弗半导体有限公司',
    account: '6217 0072 0003 6064 999（张林文）',
    address: '中国建设银行深圳南山支行',
  },{
    id: 38,
    name: '安徽亚腾发光学科技有限公司',
    account: '3405 0174 6908 0000 0805',
    address: '中国建设银行六安城南支行',
  }
]
</script>

<style lang="scss" scoped>
.multiple-table{
  width: 100%;
}
.warning-row {
  background-color: aquamarine;
}
.success-row {
  background-color: #ccc;
}
.el-table__row:hover {
  background-color: #f5f7fa;
}
:deep(.el-table__row:nth-child(2n)) {
  background-color: #f5f7fa !important;
}
</style>